<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据查询 - 第二课堂素质拓展学分评定系统</title>
    
    <!-- 外部资源 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <style>
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f3f4f6;
        }
    </style>
</head>
<body class="min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <nav class="bg-white border-b border-gray-200 sticky top-0 z-40">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center space-x-4">
                    <button onclick="history.back()" class="p-2 rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fas fa-arrow-left text-gray-600"></i>
                    </button>
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-search text-blue-600 text-sm"></i>
                        </div>
                        <div>
                            <h1 class="text-xl font-bold text-gray-900">数据查询</h1>
                            <p class="text-sm text-gray-500">多维度学生信息查询系统</p>
                        </div>
                    </div>
                </div>
                
                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <button class="p-2 rounded-lg hover:bg-gray-100 transition-colors relative">
                            <i class="fas fa-bell text-gray-600"></i>
                            <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
                        </button>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-user text-blue-600 text-sm"></i>
                        </div>
                        <span class="text-sm font-medium text-gray-700">管理员</span>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 统计卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-xl p-6 shadow card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">总学生数</p>
                        <p class="text-2xl font-bold text-gray-900 mt-1">12,847</p>
                        <p class="text-xs text-green-600 mt-1">↑ 较上月 +2.3%</p>
                    </div>
                    <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-users text-blue-600 text-xl"></i>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl p-6 shadow card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">平均学分</p>
                        <p class="text-2xl font-bold text-gray-900 mt-1">7.2</p>
                        <p class="text-xs text-green-600 mt-1">↑ 较上月 +0.5</p>
                    </div>
                    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-star text-purple-600 text-xl"></i>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl p-6 shadow card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">达标率</p>
                        <p class="text-2xl font-bold text-gray-900 mt-1">85.7%</p>
                        <p class="text-xs text-green-600 mt-1">↑ 较上月 +1.2%</p>
                    </div>
                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-check-circle text-green-600 text-xl"></i>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl p-6 shadow card-hover">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-600">预警学生</p>
                        <p class="text-2xl font-bold text-gray-900 mt-1">234</p>
                        <p class="text-xs text-red-600 mt-1">↓ 较上月 -12</p>
                    </div>
                    <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 查询条件区域 -->
        <div class="bg-white rounded-xl p-6 mb-8 shadow">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-semibold text-gray-900 flex items-center">
                    <i class="fas fa-filter text-blue-600 mr-2"></i>
                    查询条件
                </h2>
                <div class="flex space-x-2">
                    <button id="toggleAdvanced" class="px-4 py-2 text-sm bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors">
                        <i class="fas fa-chevron-down mr-1"></i>高级查询
                    </button>
                    <button id="resetForm" class="px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
                        <i class="fas fa-redo mr-1"></i>重置
                    </button>
                </div>
            </div>

            <!-- 基础查询条件 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">学生姓名/学号</label>
                    <div class="relative">
                        <input type="text" placeholder="输入姓名或学号" class="search-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none transition-all">
                        <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">院系</label>
                    <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 transition-all">
                        <option value="">全部院系</option>
                        <option value="计算机学院">计算机学院</option>
                        <option value="电子信息学院">电子信息学院</option>
                        <option value="自动化学院">自动化学院</option>
                        <option value="机械工程学院">机械工程学院</option>
                        <option value="经济管理学院">经济管理学院</option>
                        <option value="外国语学院">外国语学院</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">专业</label>
                    <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 transition-all">
                        <option value="">全部专业</option>
                        <option value="软件工程">软件工程</option>
                        <option value="人工智能">人工智能</option>
                        <option value="网络工程">网络工程</option>
                        <option value="信息安全">信息安全</option>
                        <option value="通信工程">通信工程</option>
                        <option value="电子工程">电子工程</option>
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">年级</label>
                    <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 transition-all">
                        <option value="">全部年级</option>
                        <option value="2020">2020级</option>
                        <option value="2021">2021级</option>
                        <option value="2022">2022级</option>
                        <option value="2023">2023级</option>
                        <option value="2024">2024级</option>
                    </select>
                </div>
            </div>

            <!-- 高级查询条件 -->
            <div id="advancedQuery" class="hidden border-t border-gray-200 pt-6">
                <h3 class="text-md font-medium text-gray-900 mb-4">高级筛选条件</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">学分范围</label>
                        <div class="flex space-x-2">
                            <input type="number" placeholder="最小值" min="0" step="0.1" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                            <span class="flex items-center text-gray-500">至</span>
                            <input type="number" placeholder="最大值" min="0" step="0.1" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">活动类型</label>
                        <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                            <option value="">全部类型</option>
                            <option value="学术讲座">学术讲座</option>
                            <option value="社会实践">社会实践</option>
                            <option value="志愿服务">志愿服务</option>
                            <option value="文体活动">文体活动</option>
                            <option value="创新创业">创新创业</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">学分状态</label>
                        <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
                            <option value="">全部状态</option>
                            <option value="达标">已达标</option>
                            <option value="未达标">未达标</option>
                            <option value="预警">预警状态</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- 查询按钮 -->
            <div class="flex justify-center pt-6 border-t border-gray-200">
                <button id="searchBtn" class="btn-primary mr-4">
                    <i class="fas fa-search mr-2"></i>开始查询
                </button>
                <button class="btn-secondary">
                    <i class="fas fa-save mr-2"></i>保存条件
                </button>
            </div>
        </div>

        <!-- 查询结果区域 -->
        <div class="bg-white rounded-xl overflow-hidden shadow">
            <!-- 结果统计 -->
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex flex-col md:flex-row md:items-center justify-between">
                    <div class="flex flex-wrap items-center gap-4 mb-3 md:mb-0">
                        <div class="flex items-center">
                            <i class="fas fa-list text-blue-600 mr-2"></i>
                            <span class="text-sm text-gray-600">查询结果：</span>
                            <span class="text-lg font-semibold text-gray-900 ml-1" id="resultCount">1,234</span>
                            <span class="text-sm text-gray-600 ml-1">条记录</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-clock text-green-600 mr-2"></i>
                            <span class="text-sm text-gray-600">查询耗时：</span>
                            <span class="text-sm font-medium text-gray-900 ml-1">0.15秒</span>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="text-sm text-gray-600">每页显示：</span>
                        <select class="text-sm border border-gray-300 rounded px-2 py-1">
                            <option>10</option>
                            <option selected>20</option>
                            <option>50</option>
                            <option>100</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- 表格工具栏 -->
            <div class="px-6 py-3 bg-gray-50 border-b border-gray-200">
                <div class="flex flex-col md:flex-row md:items-center justify-between">
                    <h3 class="text-md font-medium text-gray-900">查询结果列表</h3>
                    <div class="flex space-x-2 mt-2 md:mt-0">
                        <button class="px-3 py-1 text-sm border border-gray-300 text-gray-700 rounded hover:bg-gray-100 transition-colors">
                            <i class="fas fa-columns mr-1"></i>列设置
                        </button>
                        <button class="px-3 py-1 text-sm border border-gray-300 text-gray-700 rounded hover:bg-gray-100 transition-colors">
                            <i class="fas fa-filter mr-1"></i>筛选
                        </button>
                        <button class="px-3 py-1 text-sm bg-blue-50 border border-blue-300 text-blue-700 rounded hover:bg-blue-100 transition-colors">
                            <i class="fas fa-download mr-1"></i>导出
                        </button>
                    </div>
                </div>
            </div>

            <!-- 数据表格 -->
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学号</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">院系</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">专业</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">年级</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">已获学分</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">参与活动</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr class="table-row">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2020101001</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">刘雨晴</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">计算机学院</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">软件工程</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2020级</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <div class="flex items-center">
                                    <span class="font-semibold">8.5</span>
                                    <span class="text-xs text-gray-500 ml-1">/10</span>
                                </div>
                                <div class="progress-bar mt-1 w-full">
                                    <div class="progress-fill progress-success" style="width: 85%"></div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">12次</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="status-badge status-success">已达标</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-eye mr-1"></i>详情
                                </button>
                                <button class="text-green-600 hover:text-green-800">
                                    <i class="fas fa-download mr-1"></i>导出
                                </button>
                            </td>
                        </tr>
                        
                        <tr class="table-row">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2020101002</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">王浩然</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">计算机学院</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">人工智能</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2020级</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <div class="flex items-center">
                                    <span class="font-semibold">6.0</span>
                                    <span class="text-xs text-gray-500 ml-1">/10</span>
                                </div>
                                <div class="progress-bar mt-1 w-full">
                                    <div class="progress-fill progress-warning" style="width: 60%"></div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">8次</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="status-badge status-warning">未达标</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-eye mr-1"></i>详情
                                </button>
                                <button class="text-green-600 hover:text-green-800">
                                    <i class="fas fa-download mr-1"></i>导出
                                </button>
                            </td>
                        </tr>
                        
                        <tr class="table-row">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2020101003</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">赵梦琪</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">计算机学院</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">网络工程</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2020级</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <div class="flex items-center">
                                    <span class="font-semibold">7.5</span>
                                    <span class="text-xs text-gray-500 ml-1">/10</span>
                                </div>
                                <div class="progress-bar mt-1 w-full">
                                    <div class="progress-fill progress-success" style="width: 75%"></div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">10次</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="status-badge status-success">已达标</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-eye mr-1"></i>详情
                                </button>
                                <button class="text-green-600 hover:text-green-800">
                                    <i class="fas fa-download mr-1"></i>导出
                                </button>
                            </td>
                        </tr>
                        
                        <tr class="table-row">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2020101004</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">孙雪莲</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">计算机学院</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">信息安全</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2020级</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <div class="flex items-center">
                                    <span class="font-semibold">2.5</span>
                                    <span class="text-xs text-gray-500 ml-1">/10</span>
                                </div>
                                <div class="progress-bar mt-1 w-full">
                                    <div class="progress-fill progress-danger" style="width: 25%"></div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">3次</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="status-badge status-danger">预警</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-eye mr-1"></i>详情
                                </button>
                                <button class="text-green-600 hover:text-green-800">
                                    <i class="fas fa-download mr-1"></i>导出
                                </button>
                            </td>
                        </tr>
                        
                        <tr class="table-row">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2020101005</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">李天宇</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">计算机学院</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">软件工程</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2020级</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                <div class="flex items-center">
                                    <span class="font-semibold">3.5</span>
                                    <span class="text-xs text-gray-500 ml-1">/10</span>
                                </div>
                                <div class="progress-bar mt-1 w-full">
                                    <div class="progress-fill progress-warning" style="width: 35%"></div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">5次</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="status-badge status-warning">未达标</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-eye mr-1"></i>详情
                                </button>
                                <button class="text-green-600 hover:text-green-800">
                                    <i class="fas fa-download mr-1"></i>导出
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="bg-white px-6 py-3 flex items-center justify-between border-t border-gray-200">
                <div class="flex-1 flex justify-between items-center">
                    <div>
                        <p class="text-sm text-gray-700">
                            显示第 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">1,234</span> 条记录
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                            <button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-600 text-sm font-medium text-white">
                                1
                            </button>
                            <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                2
                            </button>
                            <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                3
                            </button>
                            <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                                ...
                            </span>
                            <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                124
                            </button>
                            <button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 高级查询切换
            const toggleAdvanced = document.getElementById('toggleAdvanced');
            const advancedQuery = document.getElementById('advancedQuery');
            let isAdvancedOpen = false;
            
            toggleAdvanced.addEventListener('click', function() {
                isAdvancedOpen = !isAdvancedOpen;
                if (isAdvancedOpen) {
                    advancedQuery.classList.remove('hidden');
                    toggleAdvanced.innerHTML = '<i class="fas fa-chevron-up mr-1"></i>收起高级';
                    toggleAdvanced.classList.add('bg-blue-200');
                } else {
                    advancedQuery.classList.add('hidden');
                    toggleAdvanced.innerHTML = '<i class="fas fa-chevron-down mr-1"></i>高级查询';
                    toggleAdvanced.classList.remove('bg-blue-200');
                }
            });
            
            // 重置表单
            const resetForm = document.getElementById('resetForm');
            resetForm.addEventListener('click', function() {
                const inputs = document.querySelectorAll('input, select');
                inputs.forEach(input => {
                    if (input.type === 'checkbox') {
                        input.checked = false;
                    } else {
                        input.value = '';
                    }
                });
                
                // 收起高级查询
                if (isAdvancedOpen) {
                    advancedQuery.classList.add('hidden');
                    toggleAdvanced.innerHTML = '<i class="fas fa-chevron-down mr-1"></i>高级查询';
                    toggleAdvanced.classList.remove('bg-blue-200');
                    isAdvancedOpen = false;
                }
                
                showNotification('表单已重置', 'success');
            });
            
            // 查询按钮
            const searchBtn = document.getElementById('searchBtn');
            searchBtn.addEventListener('click', function() {
                const originalHTML = searchBtn.innerHTML;
                searchBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>查询中...';
                searchBtn.disabled = true;
                
                setTimeout(() => {
                    searchBtn.innerHTML = originalHTML;
                    searchBtn.disabled = false;
                    
                    // 更新结果统计
                    document.getElementById('resultCount').textContent = '1,578';
                    
                    showNotification('查询成功！找到 1,578 条记录', 'success');
                }, 1500);
            });
            
            // 表格行点击效果
            const tableRows = document.querySelectorAll('.table-row');
            tableRows.forEach(row => {
                row.addEventListener('click', function(e) {
                    if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'BUTTON' && e.target.tagName !== 'A') {
                        const checkbox = this.querySelector('input[type="checkbox"]');
                        checkbox.checked = !checkbox.checked;
                        this.classList.toggle('bg-blue-50');
                    }
                });
            });
            
            // 显示通知
            function showNotification(message, type = 'info') {
                const notification = document.createElement('div');
                notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg ${
                    type === 'success' ? 'bg-green-100 border border-green-400 text-green-700' :
                    type === 'error' ? 'bg-red-100 border border-red-400 text-red-700' :
                    'bg-blue-100 border border-blue-400 text-blue-700'
                }`;
                
                notification.innerHTML = `
                    <div class="flex items-center">
                        <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'} mr-2"></i>
                        <span>${message}</span>
                    </div>
                `;
                
                document.body.appendChild(notification);
                
                setTimeout(() => {
                    notification.remove();
                }, 3000);
            }
        });
    </script>
</body>
</html> 